<template>
	<view class="box">
		<view class="header">
			人脸核验
		</view>
		<view class="contenter">
			
			<view class="middle">
				<image :src="imgSrc" />
			</view>
			<ll-face-detect ref="faceDetect" @detectFailed="detectFailed" @photoChange="photoChange" @detectOver="detectOver" />
			<button type="primary" @click="init">开始录入</button>
		</view>
	</view>
</template>

<script>
	import llFaceDetect from '@/components/ll-face-detect/ll-face-detect'
	export default {
		components: { llFaceDetect },
		data() {
			return {
				imgSrc: '../../static/people_pic.jpg',
			}
		},
		onLoad() {

		},
		methods: {
			init(){
				this.$refs.faceDetect.initData()
			},

			//人脸核验提交成功执行 
			detectOver(){
				uni.showToast({
					title:"人脸核验流程结束~",
					icon: 'none'
				})
			},
			// 人脸核验完成
			photoChange(path){
				this.imgSrc = path
				this.$refs.faceDetect.detectOver()
				// 上传图片操作
				uni.uploadFile({
					url: 'xxxxxxxxxx',
					name: 'file',
					timeout: 120000,
					filePath: path,
					header: {
						"Token" : 'xxxxxxxx'
					},
					success: (response) => {
						let data = JSON.parse(response.data)
						if(data.code == 200){
							this.$refs.faceDetect.detectOver()
							console.log(data)
						}
					},
					fail: (error) => {
						
					}
				})
			},
			// 人脸核验相机执行失败
			detectFailed(){
				uni.showToast({
					title:"人脸核验失败~",
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		height: 100vh;
		background-color: #264272;
		.header{
			height: 100rpx;
			line-height:100rpx;
			padding-left: 20rpx;
			font-size: 26rpx;
			color: white;
		}
		.contenter{
			width: 100%;
			margin-top: 100rpx;
			height: 500rpx;
			.middle{
				width: 500rpx;
				height: 500rpx;
				margin: auto;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			button{
				width: 600rpx;
				height: 100rpx;
				border-radius: 60rpx;
				text-align: center;
				line-height: 100rpx;
				margin: 200rpx auto 0rpx auto;
			}
		}
	}
</style>
